<script lang="ts" setup>
const { name, svgClass, parentClass, message } = defineProps({
  name: {
    type: String,
    default: ''
  },
  svgClass: {
    type: String,
    default: ''
  },
  parentClass: {
    type: String,
    default: ''
  },
  message: {
    type: String,
    default: ''
  }
})
</script>

<template>
  <span :class="`flex items-center ${parentClass} text-base ${message == '' ? '' : 'gap-1.5'}`">
    <svg v-if="name != ''" :class="`size-4 ${svgClass}`" aria-hidden="true">
      <use :xlink:href="`#svg-${name}`" />
    </svg>
    <span class="ellipsis-1">{{ message }}</span>
  </span>
</template>

<style lang="scss" scoped>
span > span,
span > svg {
  outline: unset !important;
  z-index: inherit;
  color: inherit;
  font-size: inherit;
  transition: inherit;
}

span:deep(*),
span {
  outline: unset !important;
}
</style>
